#include("./layout.html")
#@layout()

#define css()
<style>
    
    .articleCrumb {
        color: #830505;
    }
    .articleCrumb:hover {
        color: #C0272C;
    }
    
    .page {
        background-color: #C0272C;
    }
</style>
#end

#define script()
      <script type="text/javascript">
        var headerSwiper = new Swiper('#header-swiper', {
            direction: 'horizontal',
            speed: 1000,
            autoplay: {
                delay: 3000
            },
            loop: true,
        })


        // 计算文本长度
        function substrLength(elementId, length) {  //elementId：元素id，length：需保留字符串长度
            var text = document.getElementById(elementId);
            var result = "";
            if (text.innerText.length > length) {
                result = text.innerText.substr(0, length) + "...";
            } else {
                result = text.innerText;
            }
            text.innerText = result;

            text.innerHTML += '<a href="#" style="font-size:13px;padding-left: 10px; font-family:微软雅黑;">[查看更多]</a>'
        }
        function substrLength2(element, length) {  //elementId：元素id，length：需保留字符串长度
            // var text = document.getElementById(elementId);
            
            var result = "";
            if (element.innerText.length > length) {
                result = element.innerText.substr(0, length) + "...";
            } else {
                result = element.innerText;
            }
            element.innerText = result;
            var url = element.getAttribute("url");
            element.innerHTML += '<a href="'+ url +'" style="color:#C0272C;font-size:13px;padding-left: 10px; font-family:微软雅黑;">[查看更多]</a>'
        }

        function formatArticleContent() {
            var elements = document.getElementsByName("article-item-content")
            for (i = 0; i < elements.length; i++) {
                substrLength2(elements[i], 160)
            }
        }

        formatArticleContent()


    </script>
#end

#define content()

<!-- 轮播图 -->
        <section>
            <div class="container ">
                <div class="swiper swiper1" id="header-swiper">

                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="img/banner1.jpg" alt="" /></div>
                        <div class="swiper-slide"><img src="img/banner2.jpg" alt="" /></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination swiper-pagination1"></div>

                    <!-- 如果需要导航按钮 -->
                    <!-- <div class="swiper-button-prev swiper-button-prev1"></div> -->
                    <!-- <div class="swiper-button-next swiper-button-next1"></div> -->

                </div>
            </div>
        </section>
    </header>



    <!-- 当前位置 -->
    <section>
        <div class="container ">
            <div style="background-color:#EDEDED; height: 80px; margin-top: 20px;
            line-height: 80px; padding-left: 20px;
            ">
                <span style="color: black;">当前位置：</span>
                 
                 
                <span style="color: #830505;"> #articleCrumb(aClass = "articleCrumb",indexUrl="/index.html",indexText="首页") </span>
                
            </div>

        </div>
    </section>
    
    <!--记录当前选中的分类-->

    
    #if(category.pid == 0 )
        #set(parentCategory = category)
    #else
        #categories(asTree = false)
            #for(c : categories)
                #if(c.id == category.pid)
                    #set(parentCategory = c)
                #end
            
            #end
            
        #end
    #end
    
    

    
    <!-- 文章列表 -->
    <section>
        <div class="container">
            <div class="row g_clear_margin" style="min-height:600px;">
                <!-- 栏目导航 -->
                <div class="col-xs-12 col-sm-12 col-md-3 " style=" margin-top: 10px" id="topic-list">
                    <div >
                        
                        #for(menu : MENUS)
                            #if(menu.relative_id == parentCategory.id)
                            
                                <div class="topic-item-header">
                                    <span style="font-size: 18px;">#(menu.text)</span>
                                </div>
                                
                                #if(menu.hasChild())
                                    
                                    #for(childMenu : menu.getChilds())
                                        
                                        <div class="topic-item">
                                            <a href="#(childMenu.url)" style="#(childMenu.isActive?'color: #be1114;font-weight: bold;':'')">#(childMenu.text)</a>
                                            <div class="float-flag-shape"></div>
                                        </div>
                                    #end
                                    
                                #end
                            
                            
                            #end
                        
                        #end
                    
                    
                    </div>
                    <div style="margin-top: 20px;" id="recommend-for-you">
                        <div class="topic-item-header">
                            <span style="font-size: 18px;">为您推荐</span>
                        </div>
                        
                        
                         #articles(orderBy = "id desc",count = 6,withRecommend=true,withTop=true)

                            #for(article :articles)
                        
                                
                                <div class="recommend-new-item">
                                    <img src="img/right_arrow.svg">
                                    <a href="#(article.url)">#(article.title ??)</a>
                                </div>
                        
                            #end
                    
                        #end

                    </div>
                </div>
                <!-- 文章列表 -->
                <div class="col-xs-12 col-sm-12 col-md-9 g_clear_margin" style="padding: 0 0 20px 20px;" id="article-list">
                    
                        #articlePage()
                            #for(article : articlePage.list)
                                <div class="article-item-container" style="margin-top: 10px; height:auto;">
                                    <!-- 文章内容 -->
                                    <div class="article-item">
                                        
                                        <div>
                                            <a href="#(article.url)" target="_self" >
                                                <div style="font-size:20px">#(article.title)</div>
                                            </a>
                                        </div>
                                        
                                        
                                        <div style="display: flex; align-items: center; justify-content: start;">
                                            <p class="article-item-content" id="article-item-content" name="article-item-content" url="#(article.url)">
                                                #(article.text)
                                            </p>
            
                                            <!-- 图片内容 -->
                                            #if(article.thumbnail)
                                                 <div class="new-item-right-container">
                                                    <img class="new-item-right-img" src="#(article.thumbnail)"></img>
                                                </div>
                                            #end
                                   
                                        </div>
            
            
                                        <div class="article-item-footer">
                                            <span>#(article.created)</span>
                                            <img src="img/browse-ege.svg"></img>
                                            <div class="article-browse-num">#(article.view_count)</div>
                                        </div>
                                        
                                    </div>
                                    
                                </div>
                            #end
                            
                            
                            #articlePaginate(firstGotoIndex=true)
                            <div style="display: flex; justify-content: center;">
                                <nav aria-label="">
                                    <ul class="pagination justify-content-center">
                                        #for(page : pages)
                                        <li class="page-item #(page.style)"><a class="page-link" href="#(page.url ??)">#(page.text)</a></li>
                                        #end
                                    </ul>
                                </nav>
                            </div>
                            #end
                            
                            
                        #end
                </div>
            </div>

        </div>
    </section>



#end
